<template>
  <div>
    <div style="margin: 10px;text-align: center;">
      <el-input
        v-model="cdtSname"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        placeholder="门店"
        size="small"
      />
      <el-input
        v-model="cdtUsername"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        placeholder="账号"
        size="small"
      />
      <el-button
        class="filter-item"
        style="margin-right: 10px"
        type="primary"
        icon="el-icon-search"
        size="small"
        @click="searchSalon"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        style="margin-right: 10px"
        icon="el-icon-refresh"
        size="small"
        @click="resetSalon"
      >
        重置
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="lstUser"
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      <el-table-column
        prop="sname"
        label="所属门店"
        align="center"
        width="600px"
      />
      <el-table-column
        prop="username"
        label="账号"
        align="center"
        width="150px"
      />
      <el-table-column
        prop="nickName"
        label="用户名"
        align="center"
        width="150px"
      />
      <el-table-column align="center" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-input
            v-model="row.starDetails"
            placeholder="评星说明"
            size="mini"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        class-name="small-padding fixed-width"
        width="150px"
      >
        <template slot-scope="{ row }">
          <el-rate v-model="row.star" @change="change(row, $event)"></el-rate>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        class-name="small-padding fixed-width"
        width="150px"
      >
        <template slot-scope="{ row }">
          <el-button type="success" size="mini" @click="setStar(row)">
            提交
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import { getAdminsByDuties, setStar, someAdminsByDuties } from '@/api/admin'
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'

export default {
  components: { Pagination },
  data () {
    return {
      cdtSname: '',
      cdtUsername: '',
      lstUser: [],
      lstUserCp: [],
      listQuery: {
        page: 1,
        limit: 12
      },
      total: 0,
      listLoading: true
    }
  },
  computed: {
    ...mapGetters(['id', 'deptId'])
  },
  created () {
    this.fetchData()
  },
  methods: {
    searchSalon() {
      if(this.cdtUsername !== '' || this.cdtSname !== '') {
        this.listLoading = true
        someAdminsByDuties(203, this.id, this.deptId, this.cdtSname, this.cdtUsername).then(res => {
          this.lstUser = res.data.data
          this.lstUserCp = [...this.lstUser].map(item => ({ ...item }))
          this.total = 0
          this.listLoading = false
        })
      }
    },
    resetSalon () {
      this.cdtSname = ''
      this.cdtUsername = ''
      this.listLoading = true
      getAdminsByDuties(203, 1, 12, this.id, this.deptId).then(
        res => {
          if(res.data.data) {
            this.lstUser = res.data.data.records
            this.lstUserCp = [...this.lstUser].map(item => ({ ...item }))
            this.total = res.data.data.total
          }
          this.listLoading = false
        }
      )
    },
    change(row, star) {
      const usr = this.lstUserCp.find(u => {
        return u.id === row.id
      })
      if (star === 1 && usr.star === 1) {
        row.star = 0
      }
      usr.star = row.star
    },
    fetchData () {
      this.listLoading = true
      getAdminsByDuties(203, this.listQuery.page, this.listQuery.limit, this.id, this.deptId).then(
        res => {
          // console.log(res.data);
          if(res.data.data) {
            this.lstUser = res.data.data.records
            this.lstUserCp = [...this.lstUser].map(item => ({ ...item }))
            this.total = res.data.data.total
          }
          this.listLoading = false
        }
      )
    },
    setStar (row) {
      setStar(row.id, row.starDetails, row.star).then(res => {
        this.$notify({
          title: res.data.message,
          message: res.data.status,
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
